<template>
    <div class="view">
        <div class="mall-search-box" :class="headerClass">
            <div class="mall-search-input" @click.stop="toSearch">输入关键字搜索</div>
        </div>
        <cube-scroll class="mall-wrap" :data="productList" ref="scroll" :scroll-events="['scroll']" @scroll="onScrollHandle">
            <div class="mall-banner">
                <cube-slide class="mall-banner-slide" ref="slideBannerSlide" :data="bannerList">
                    <cube-slide-item v-for="(banner, index) in bannerList" :key="index">
                        <img class="home-banner-img" :src="banner.image.file_path+'?imageView2/2/w/'+clientWidth+''" @click.stop="openLink(banner.href)">
                    </cube-slide-item>
                    <template slot="dots" slot-scope="props">
                        <span class="banner-dot" :class="{active: props.current === index}"
                              v-for="(item, index) in props.dots"></span>
                    </template>
                </cube-slide>
            </div>
            <div class="category-section">
                <div class="category-section-row" v-for="(categoryList,index) in categoryListCol" :key="index">
                    <div class="category-item" v-for="category in categoryList" :key="category.category_id"
                         @click="toCategoryPage(category.category_id)">
                        <img :src="category.image.file_path+'?imageView2/0/w/60'">
                        <span>{{category.name}}</span>
                    </div>
                </div>
            </div>
            <div class="product-section" v-if="productList.length>0">
                <waterfall :data="productList">
                    <div class="product-item" v-for="product in productList" @click="toProductDetail(product.item_id)">
                        <div class="product-item-img">
                            <img :src="product.image[0].file_path+'?imageView2/2/w/200'">
                        </div>
                        <div class="product-item-title ellipsis-2">
                            {{product.name}}
                        </div>
                        <div class="product-item-price">
                            <div class="product-item-price-box">
                                <span class="now-price">{{product.item_price}}</span>
                                <span class="line-price">{{product.line_price}}</span>
                            </div>
                            <span class="product-item-sale">已售 {{product.sales_num}}</span>
                        </div>
                    </div>
                </waterfall>
            </div>
        </cube-scroll>
        <catapult-menu position="RB" :menuItems="menuItems" :baseDistance="110" @clickMenu="clickMenu">
            <svg class="icon menu-main-svg-icon" aria-hidden="true" slot="main">
                <use xlink:href="#icon-caidan"></use>
            </svg>
            <svg class="icon  menu-item-svg-icon" aria-hidden="true" :slot="item.name" v-for="(item,index) in menuItems" :key="index">
                <use :xlink:href="item.xlink"></use>
            </svg>

        </catapult-menu>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CatapultMenu from "@/components/aui/CatapultMenu.vue";

    import CommonUnit from "@/unit/CommonUnit";
    import Waterfall from "vue-waterfall2/waterfall.vue";
    import NativeBridge from "@/service/NativeBridge";
    import {updateDataCache} from "@/store/dispatches";


    @Component({
        components: {
            Waterfall, CatapultMenu
        }
    })
    export default class Mall extends Scene {
        private clientWidth = document.body.clientWidth;
        private publicPath: string = process.env.BASE_URL;
        private bannerList: any[] = [];
        private categoryList: any[] = [];
        private categoryListCol: any[] = [];
        private productList: any[] = [];

        private pullDownY: number = 0;
        private pullDownStyle: string = "";
        private triggerSurpriseFlag: boolean = false;
        private triggerSurprise: boolean = false;
        private headerClass: string = "";

        private menuItems: any[] = [
            {name: "shoppingCart", xlink: "#icon-gouwuche1", routeName: "shoppingCart"},
            {name: "order", xlink: "#icon-dingdanlan", routeName: "orderList"},
            {name: "address", xlink: "#icon-position", routeName: "addressList"},
            {name: "money", xlink: "#icon-yue", routeName: "mineIncome"}
        ];

        @State("DeviceStore")
        private device: any;

        @State("DataCacheStore")
        public dataCache!: any;

        private getCategoryListCol(): any[] {
            let categoryListColAll: any[] = [];

            let categoryAll: any[] = [];
            let categoryList = this.categoryList;
            categoryListColAll.push({
                category_id: "",
                name: "全部分类",
                image: {file_path: require("@/assets/images/icon-all-category.png")}
            });
            for (let i in categoryList) {
                if (Number(i) < 9) {
                    categoryListColAll.push(categoryList[i]);
                }
            }
            return [categoryListColAll.slice(0, 5), categoryListColAll.slice(5, 10)];
        };

        private getData(): void {
            Http.get(this.api.mallRecommend, {num: 10}).then((res) => {
                if (res.code === 1) {
                    updateDataCache({mallProductList: res.data.list});
                    this.productList = res.data.list;
                }
            });
            Http.get(this.api.mallBanner).then((res) => {
                if (res.code === 1) {
                    updateDataCache({mallBannerList: res.data.list.data});
                    this.bannerList = res.data.list.data;
                }
            });
            Http.get(this.api.category).then((res) => {
                if (res.code === 1) {
                    const categoryList = res.data;
                    updateDataCache({categoryList: res.data});
                    this.$nextTick(() => {
                        this.categoryList = categoryList;
                        this.categoryListCol = this.getCategoryListCol();
                    });
                }
            });
        }

        private activated() {
            this.getData();
        }

        private created() {
            this.categoryList = this.dataCache.categoryList;
            this.bannerList = this.dataCache.mallBannerList;
            this.productList = this.dataCache.mallProductList;
            this.categoryListCol = this.getCategoryListCol();
        }

        private updated() {
            this.$nextTick(() => {
                (<any> this).$refs.scroll.refresh();
            });
        }

        private onScrollHandle(pos: any) {
            this.pullDownY = pos.y;
            if (pos.y > 0) {
                this.pullDownStyle = `top:${pos.y}px`;
                this.triggerSurpriseFlag = false;
                if (this.pullDownY > 90) {
                    this.triggerSurpriseFlag = true;
                }
            }

            if (this.pullDownY < -90) {
                this.headerClass = "opacity";
            } else {
                this.headerClass = "";
            }
        }

        private toCategoryPage(id: string = ""): void {
            this.navigateTo({
                name: "productCategory",
                query: {
                    id: id
                }
            });
        }

        private toProductDetail(id: string) {
            this.navigateTo({
                name: "productDetail",
                query: {
                    id: id
                }
            });
        }

        private clickMenu(item: any, i: number) {
            if (item.routeName) {
                this.navigateTo({
                    name: item.routeName
                });
            }
        }

        private toSearch() {
            this.navigateTo({
                name: "productList",
                query: {
                    focus: 1
                }
            });
        }

        private openLink(url: string) {
            if (this.device.status) {
                NativeBridge.openBrowser(url);
            } else {
                window.location.href = url;
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .view
        width 100vw;
        height calc(100vh - var(--safe-area-inset-bottom) - 47px);
        background $theme-page-common-background-color;
        position relative;

        .mall-search-box
            position absolute;
            left 0;
            top 0;
            height calc(44px + var(--safe-area-inset-top));
            z-index: 200;
            width: 100%
            padding: var(--safe-area-inset-top) 40px 0 40px;
            display flex;
            justify-content center;
            align-items center;
            background #000;
            background: linear-gradient(rgba(113, 113, 113, .6), rgba(255, 255, 255, 0));

            .mall-search-input
                flex 1;
                height 28px;
                line-height 28px;
                text-align center;
                font-size 13px;
                color #333;
                border-radius 2px;
                background rgba(255, 255, 255, .6);

        .mall-banner
            width 100vw;
            height 50vw;
            background #fff;

            .home-banner-img
                width 100vw;
                height 50vw;
                display block;

            .cube-slide-dots
                bottom 5px;

                .banner-dot
                    width 8px;
                    height 8px;
                    border-radius 8px;
                    background #fff;
                    opacity .4;
                    margin 0 4px;
                    background $mall-common-color;

                .active
                    opacity 1;

        .category-section
            z-index 5;
            margin 13px 15px 0 15px;
            padding-bottom 10px;
            /*background #fff;*/

            .category-section-row
                display flex;
                position relative;
                align-items left;

                .category-item
                    width 20%;
                    display flex;
                    flex-direction column;
                    align-items center;
                    font-size 12px;
                    color #333;
                    margin-bottom 3px;
                    margin-top 10px;

                    img
                        width 45px;
                        height 45px;
                        margin-bottom 7px;
                        border-radius 50%;
                        background #fff;

                    span
                        padding-top 3px;

        .product-section
            margin-top 10px;
            width 100vw;
            height auto;
            display flex;
            flex-wrap wrap;
            padding-left 15px;

        .opacity
            background $theme-thin-color;

    .menu-main-svg-icon
        width 30px;
        height 30px;

    .menu-item-svg-icon
        width 26px;
        height 26px;
</style>
